<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      过滤器案例：格式化日期
    </pre>

		<div id="app">
			<!-- 过滤器后面加括号，括号中就是传递的参数 -->
			<p>{{ date | format('yyyy-MM-dd hh:mm:ss') }}</p>

			<!-- 如果想传递多个参数，需要在第一个参数后面以逗号分隔，加上第二个参数 -->
			<!-- <p>{{ date | format('yyyy-MM-dd', 'abc', 'def')}}</p> -->
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 回调函数中的参数：
			// 第一个参数：是需要格式化的数据 date
			// 第二个参数及以后的所有参数：是过滤器传递过来的参数
			Vue.filter('format', function (val, params) {
				// console.log(params)
				function dateFormat(date, format) {
					if (typeof date === 'string') {
						var mts = date.match(/(\/Date\((\d+)\)\/)/)
						if (mts && mts.length >= 3) {
							date = parseInt(mts[2])
						}
					}
					date = new Date(date)
					if (!date || date.toUTCString() == 'Invalid Date') {
						return ''
					}
					var map = {
						M: date.getMonth() + 1, //月份
						d: date.getDate(), //日
						h: date.getHours(), //小时
						m: date.getMinutes(), //分
						s: date.getSeconds(), //秒
						q: Math.floor((date.getMonth() + 3) / 3), //季度
						S: date.getMilliseconds(), //毫秒
					}

					format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
						var v = map[t]
						if (v !== undefined) {
							if (all.length > 1) {
								v = '0' + v
								v = v.substr(v.length - 2)
							}
							return v
						} else if (t === 'y') {
							return (date.getFullYear() + '').substr(4 - all.length)
						}
						return all
					})
					return format
				}
				return dateFormat(val, params)
			})

			var vm = new Vue({
				el: '#app',
				data: {
					date: new Date(),
				},
			})
		</script>
	</body>
</html>
